<!-- 商品管理 => 商品创建 -->
<template>
  <div class="container" wh-100>
    <nav center>
      <div class="inputbox">
        <el-input placeholder="请输入查询用户名" v-model="searchName" clearable>
        </el-input>
        <div class="adduser">
          <el-button @click="handleAddUser" type="primary" plain
            >添加用户</el-button
          >
        </div>
      </div>
    </nav>
    <main>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>活动列表</el-breadcrumb-item>
        <el-breadcrumb-item>活动详情</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="mainbody">
        <el-table
          v-loading="isloading"
          :data="showTableData"
          style="width: 100%"
        >
          <el-table-column prop="email" label="商品" width="180">
            <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span style="margin-left: 10px">{{ scope.row.date }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="phone" label="评价" width="180">
            <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span style="margin-left: 10px">{{ scope.row.date }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="rules" label="用户" width="180">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <p>姓名: {{ scope.row.name }}</p>
                <p>住址: {{ scope.row.address }}</p>
                <div slot="reference" class="name-wrapper">
                  <el-tag size="medium">{{ scope.row.name }}</el-tag>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                :loading="isloading"
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </main>

    <footer>
      <el-pagination layout="prev, pager, next" :total="50"> </el-pagination>
    </footer>

    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <el-form label-width="80px" :model="newUserForm">
        <el-form-item label="名称">
          <el-input :model="newUserForm.name"></el-input>
        </el-form-item>
        <el-form-item label="以卖奥">
          <el-input :model="newUserForm.email"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input :model="newUserForm.phone"></el-input> </el-form-item
        ><el-form-item label="评价">
          <el-input :model="newUserForm.judge"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          :loading="isAppendLoading"
          type="primary"
          @click="handleComfirm"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { judge } from "@/mockApi/judge/judge";
export default {
  name: "zT",
  components: {},
  computed: {
    showTableData() {
      return this.tableData.filter((row) => row.name.includes(this.searchName));
    },
  },
  data() {
    return {
      tableData: [],
      isloading: false,
      deletedRow: {}, //删除的行
      searchName: "",
      dialogVisible: false,
      newUserForm: {
        name: "",
        email: "",
        phone: "",
        judge: "",
      },
      isAppendLoading: false,
    };
  },
  methods: {
    handleDelete(i, row) {
      this.deletedRow = row; //获得删除的行
      judge.delete(row.id).then((res) => {
        if (res.status === "success") {
          this.$message.success("message删除成功");

          setTimeout(() => {
            //拉取时转圈圈
            this.isloading = true;
            judge
              .getAll()
              .then((res) => {
                this.tableData = res;
              })

              .catch((err) => {
                this.tableData = err;
              })
              .finally(() => {
                this.isloading = false;
              });
          });
        }
      });
    },
    handleEdit() {
      this.$message("点击了编辑");
    },
    handleAddUser() {
      this.dialogVisible = true;
    },
    handleComfirm() {
      this.isAppendLoading = true;
      judge
        .append(this.newUserForm)
        .then((res) => {
          console.log(res);
          if (res.status === "success") {
            this.$message.success("message添加成功");
            setTimeout(() => {
              this.isloading = true;
              judge
                .getAll()
                .then((res) => {
                  this.tableData = res;
                })

                .catch((err) => {
                  this.tableData = err;
                })
                .finally(() => {
                  this.isloading = false;
                });
            }, 1000);
          }
        })
        .finally(() => {
          this.isAppendLoading = false;
          this.dialogVisible = false;
        });
    },
  },

  mounted() {
    this.isloading = true;
    judge
      .getAll()
      .then((res) => {
        this.tableData = res;
        this.$message.success("message获取成功");
      })
      .catch((err) => {
        this.tableData = err;
        this.$message.error("message获取失败");
      })
      .finally(() => {
        this.isloading = false;
      });
  },
  handleClick() {
    this.$message("点击了");
  },
};
</script>

<style scoped>
.inputbox {
  width: 500px;
  display: flex;
}
.container {
  display: flex;
  flex-direction: column;
}
nav {
  height: 80px;
  background-color: white;
  display: flex;
}
main {
  flex: 1;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
}
footer {
  height: 30px;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mainbody {
  width: 1000px;
  height: 100%;
  background-color: white;
}
</style>
